<template>
    <el-col>

        <el-dialog title="增加" :visible.sync="addDialogVisible" :before-close="handleCloseAddDialog">
            <el-form ref="orderInfo" :model="orderInfo" label-width="100px">
                <el-form-item label="患者名" prop="patientId">
                    <el-select v-model="orderInfo.patientId" placeholder="">
                        <el-option v-for="(item, index) in patientList" :key="index" :value="item.patientId"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="医生名" prop="doctorId">
                    <el-select v-model="orderInfo.doctorId" placeholder="">
                        <el-option v-for="(item, index) in doctorList" :key="index" :value="item.userId"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseAddDialog">取 消</el-button>
                <el-button type="primary" @click="handleConfirmAddDialog">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="更新" :visible.sync="updateDialogVisible" :before-close="handleCloseUpdateDialog">
            <el-form ref="orderInfo" :model="orderInfo" label-width="100px">
                <el-form-item label="医生名" prop="doctorId">
                    <el-select v-model="orderInfo.doctorId" placeholder="医生名">
                        <el-option v-for="(item, index) in doctorList" :key="index" :value="item.userId"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="患者名" prop="patientId">
                    <el-select v-model="orderInfo.patientId" placeholder="患者名">
                        <el-option v-for="(item, index) in patientList" :key="index" :value="item.patientId"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseUpdateDialog">取 消</el-button>
                <el-button type="primary" @click="handleConfirmUpdateDialog">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="订单详情" :visible.sync="orderItemDialogVisible" :before-close="handleCloseOrderItemDialog">
            <orderItem v-if="orderItemDialogVisible" :order-id="orderId" />
        </el-dialog>

        <el-row>
            <el-col :span="2">
                <el-button type="primary" @click="addDialogVisible = true">增加</el-button>
            </el-col>
            <el-col :span="2">
                <el-button :disabled="multipleSelection.length > 1" type="warning" @click="showUpdateDialogVisible">更新
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="danger" @click="handleDeleteSelectIds">删除</el-button>
            </el-col>
            <el-col :span="5">
                <el-select v-model="query.doctorId" placeholder="医生">
                    <el-option v-for="(item, index) in doctorList " :key="index" :value="item.userId"
                        :label="item.name"></el-option>
                </el-select>
            </el-col>
            <el-col :span="5">
                <el-select v-model="query.patientId" placeholder="患者">
                    <el-option v-for="(item, index) in patientList " :key="index" :value="item.patientId"
                        :label="item.name"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <el-button @click="queryClear"> 清除 </el-button>
            </el-col>
            <el-col :span="2">
                <el-button @click="doSelectAll"> 搜索 </el-button>
            </el-col>
        </el-row>

        <el-table ref="multipleTable" :data="orderList" style="width: 100%" row-key="orderId" lazy
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="orderId" label="订单 ID" />
            <el-table-column prop="doctorName" label="医生名" />
            <el-table-column prop="patientName" label="患者名" />
            <!-- <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.state === 0">未完成</el-tag>
                    <el-tag type="success" v-if="scope.row.state === 1">完成</el-tag>
                </template>
            </el-table-column> -->

            <el-table-column label="详情">
                <template slot-scope="scope">
                    <el-button size="mini" @click="showOrderItemDialogVisible(scope.row.orderId)">订单详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" @prev-click="currentChange"
            @next-click="currentChange" @current-change="currentChange" />
    </el-col>
</template>

<script>
import orderItem from '@/components/orderItem/orderItem.vue'
export default {
    name: 'MOrder',
    components: {
        orderItem
    },
    data() {
        return {
            addDialogVisible: false,
            updateDialogVisible: false,
            orderItemDialogVisible: false,

            orderList: [],
            doctorList: [],
            patientList: [],

            page: 0,
            pageSize: 10,
            total: 0,

            orderId: 0,
            hospitalId: 0,

            multipleSelection: [],

            orderInfo: {
                orderId: "",
                patientId: "",
                doctorId: "",
                state: "",
            },

            query: {
                name: "",
                doctorId: "",
                patientId: "",
                state: "",
            }
        }
    },
    created() {
        this.hospitalId =
            localStorage.getItem("hospitalId") === "null"
                ? "null"
                : parseInt(localStorage.getItem("hospitalId"));
        this.doSelectAll();
        this.doSelectAllDoctor();
        this.doSelectAllPatient();
    },
    methods: {
        doSelectAllHospital() {
            this.$store.dispatch("hospital/allId", {}).then((res) => {
                this.hospitalList = res;
            });
        },
        showOrderItemDialogVisible(orderId) {
            this.orderId = orderId;
            this.orderItemDialogVisible = true;
        },
        handleCloseOrderItemDialog() {
            this.orderItemDialogVisible = false;
        },
        currentChange(index) {
            this.page = index - 1;
        },
        showUpdateDialogVisible() {
            if (this.multipleSelection.length === 0) {
                this.$message.error("请选择");
                return;
            }
            this.orderInfo = this.multipleSelection[0];
            this.updateDialogVisible = true;
        },
        showMenuDialogVisible(orderId) {
            this.orderInfo = orderId;
            this.menuDialogVisible = true;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        handleCloseAddDialog() {
            this.addDialogVisible = false;
            this.refresh();
        },
        handleConfirmAddDialog() {
            this.$refs.orderInfo.validate((valid) => {
                if (valid) {
                    this.addDialogVisible = false;
                    this.$store.dispatch("order/add", this.orderInfo).then(() => { });
                }
            });
            this.refresh();
        },
        handleCloseUpdateDialog() {
            this.updateDialogVisible = false;
            this.refresh();
        },
        handleConfirmUpdateDialog() {
            this.$refs.orderInfo.validate((valid) => {
                if (valid) {
                    this.updateDialogVisible = false;
                    this.$store
                        .dispatch("order/update", this.orderInfo)
                        .then(() => { });
                }
            });
            this.refresh();
        },
        handleCloseMenuDialog() {
            this.menuDialogVisible = false;
        },
        handleDeleteSelectIds() {
            const ids = [];
            for (const obj of this.multipleSelection) {
                ids.push(obj.orderId);
            }
            this.$store.dispatch("order/delete", ids).then(() => { });
            this.doSelectAll();
        },
        doSelectAll() {
            this.$store
                .dispatch("order/selectAll", {
                    obj: {
                        orderId: this.query.orderId != "" ? this.query.orderId : 0,
                        doctorId: this.query.doctorId != "" ? this.query.doctorId : 0,
                        patientId: this.query.patientId != "" ? this.query.patientId : 0,
                        hospitalId: this.hospitalId != 'null' ? this.hospitalId : 0,
                        state: this.query.state != "" ? this.query.state : 0,
                    },
                    page: this.page,
                    pageSize: this.pageSize,
                })
                .then((res) => {
                    this.orderList = res.list;
                    this.total = res.total;
                });
        },
        doSelectAllDoctor() {
            this.$store.dispatch("user/allId", {
                roleId: 3,
                hospitalId: this.hospitalId != 'null' ? this.hospitalId : 0
            }).then((res) => {
                this.doctorList = res;

            });
        },

        doSelectAllPatient() {
            this.$store
                .dispatch("patient/allId", {
                })
                .then((res) => {
                    this.patientList = res;
                });
        },

        queryClear() {
            this.query = {
                doctorId: "",
                patientId: "",

            }
            this.doSelectAll()
        },
        prevClick() {
            this.page -= 1;
            this.doSelectAll();
        },
        nextClick() {
            this.page += 1;
            this.doSelectAll();
        },
        refresh() {
            this.orderInfo = {
                doctorId: "",
                patientId: "",
            };
            this.doSelectAll();
            this.$refs.multipleTable.clearSelection();
        },
    }
}
</script>

<style scoped>

</style>
